<template>
	<div>
		<el-table :data="tableData" stripe style="width: 80%" class="table-goods">
			<el-table-column
				prop="shopName"
				label="宜博士旗舰店"
				width="400"
				align="center"
				><div class="inner">
					<img
						class="img-show"
						src="https://imgservice.suning.cn/uimg1/b2c/image/rJ2qCPJiHGRoNvajlefjzA.png_100w_100h_4e"
						alt=""
					/><span
						>苹果(Apple) iPhone 13 256GB 粉色 移动联通电信5G全网通手机 双卡双待
						苹果iphone13 颜色：粉色版本：iPhone13（256GB）
					</span>
				</div>
			</el-table-column>
			<el-table-column prop="info" label="服务信息" width="180" align="center">
			</el-table-column>
			<el-table-column prop="price" label="单价" align="center">
			</el-table-column>
			<el-table-column prop="number" label="数量" align="center">
			</el-table-column>
			<el-table-column prop="sum" label="小计" align="center">
			</el-table-column>
		</el-table>

		<div class="info-goods">
			<div>发票信息</div>
			<el-link type="info" class="info-goods-tip">请先确认配送信</el-link>
		</div>

		<el-card class="card-pay">
			<div class="card-pay-inner">
				<h1>应付金额：<span> ¥6938.00</span></h1>
				<p>开通super会员，本单可额外返423云钻（折合4.23元）立即开通></p>
				<p>您需先选择配送地址，再提交订单</p>
				<footer class="fotter-pay">
					<p>
						您需先选择配送地址，再提交订单后尽快支付，商品才不会被人抢走哦！
					</p>
					<div><el-button type="primary">提交订单</el-button></div>
				</footer>
			</div>
		</el-card>
	</div>
</template>

<script>
export default {
	name: "tableData",
	data() {
		return {
			tableData: [
				{
					shopName: "2016-05-02",
					info: "支付成功后将尽快为您发货",
					price: "5999",
					number: 1,
					sum: "5999",
				},
			],
		}
	},
}
</script>

<style lang="less" scoped>
.table-goods {
	margin: 0 auto;
}
.inner {
	display: flex;
	span {
		font-size: 14px;
	}
}
.img-show {
	width: 60px;
	height: 60px;
}
.info-goods {
	margin-left: 200px;
	width: 1100px;
	height: 32px;
	border: solid 1px #f0f0f0;
}
div {
	color: #221814;
	font-size: 15px;
	font-weight: bolder;
}
.info-goods-tip {
	font-size: 12px;
	color: rgba(31, 30, 30, 0.2);
}
.card-pay {
	display: flex;
	justify-content: flex-end;
	margin-top: 50px;
	.card-pay-inner {
		margin-left: 800px;
		h1,
		p,
		footer {
			padding-top: 5px;
			color: #f90;
		}
	}
	.fotter-pay {
		display: flex;
		align-items: flex-end;
	}
}
</style>
